define(function(require,exports,module){

	var React = require('react');
	var $ = require('jquery');
	var Highcharts = require('highcharts');
	var numberFormat = require('numberFormat');
	var async = require('async');

		
	module.exports = React.createClass({
		getInitialState:function(){
            return {
				data:[]
			};
		},
		componentDidMount:function(){
			var data_array = [];
			var all_count = 0;
			var url = this.props.url;
			var data = this.props.ajax_data;
			var title = this.props.title;

			var options = {
				colors: [
					'#058DC7',
					'#50B432',
					'#ED561B',
					'#DDDF00',
					'#24CBE5',
					'#64E572',
					'#FF9655',
					'#FFF263', 
					'#6AF9C4'
				], 
				chart: {
		            renderTo: this.props.id,
		            polar: true
		        },
				title: {
                	text: this.props.title + ':' + all_count
	            },
	            tooltip: {
					formatter:function(){
						return this.key+'开机量: '+Highcharts.numberFormat(this.y,0,'.',',')+',占总量<b>'+Highcharts.numberFormat(this.percentage, 2) +'%</b>'
					}
					
	            },
	            plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
	                        enabled: false
	                    },
	                    showInLegend: true
	                }
	            },
	            series: [{
	                type: 'pie',
	                name: this.props.title,
	                data: data_array
	            }]
			}

			var chart = new Highcharts.Chart(options);

			var get_ajax_data = function(){
				async.series({
					ios:function(done){
						$.ajax({
                            url:url,
                            data:{'sql':data.ios_sql,'access_token':data.access_token},
                            type:'post',
                            dataType:'json',
                            success:function(ios_data){
                                done(null,ios_data[0]);
                            },
                            error:function(xhr,status,err){
                                console.error('获取数据失败！',status,err.toString());
                            }
                        });
					},
					android:function(done){
						$.ajax({
                            url:url,
                            data:{'sql':data.android_sql,'access_token':data.access_token},
                            type:'post',
                            dataType:'json',
                            success:function(android_data){
                                done(null,android_data[0]);
                            },
                            error:function(xhr,status,err){
                                console.error('获取数据失败！',status,err.toString());
                            }
                        });
					}
				},function(error,result){
					var tmp = [];
					var count = 0;

					tmp.push(['IOS',result.ios.v]);
					tmp.push(['Android',result.android.v]);
					options.series[0].data = tmp;
					count = numberFormat('#,###.',(parseInt(result.ios.v) + parseInt(result.android.v)));

					options.title.text = title + ":" + count;

					var chart = new Highcharts.Chart(options);
					chart.redraw();

				});	
			}
			

			get_ajax_data();
            setInterval(get_ajax_data,this.props.interval ? this.props.interval : 500000);
		},
		render:function(){
			return (
				<div className={this.props.className} id={this.props.id}></div>
			);
		}
	});

});